import Vue from 'vue'
import VueRouter from 'vue-router'
import Reg from '@/views/Reg/index.vue'
import Login from '@/views/Login/index.vue'
import HmInput from '@/views/Form/HmInput.vue'
import HmButton from '@/views/Form/HmButton.vue'
import HmForm from '@/views/Form/HmForm.vue'
import Container from '@/views/Form/Container.vue'
import TestA from '@/views/Form/children/Testa.vue'
import TestB from '@/views/Form/children/Testb.vue'
import Layout from '@/views/layout/index.vue'
import Home from '@/views/layout/home/index.vue'
import ArtCate from '@/views/layout/art/art-cate.vue'
import ArtList from '@/views/layout/art/art-list.vue'
import UserInfo from '@/views/layout/user/user-info.vue'
import UserAvatar from '@/views/layout/user/user-avatar.vue'
import UserPwd from '@/views/layout/user/user-pwd.vue'
import Dropdown from '@/views/Form/Dropdown.vue'
import ScopeSlot from '@/views/Form/ScopeSlot.vue'
import Table from '@/views/Form/Table.vue'
import Sync from '@/views/Form/Sync.vue'
import VueQuillEditor from '@/views/Form/VueQuillEditor.vue'
// 导入store  store====this.$store
import store from '@/store/index.js'
// Message===this.$message
import { Message } from 'element-ui'

/*
import 导入地  先找对应名字的js  
import xxx from '@/abc'
1:先找abc.js  
2:再找abc.vue
3:再找abc/package.json(基本不可能 写这东西的,所以不用理)
4:abc/index.js
5:abc/index.vue
*/

Vue.use(VueRouter)

const routes = [
  {
    path: '/reg',
    component: Reg
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    children: [
      {
        path: '/home',
        component: Home
      },
      {
        path: '/art-cate',
        component: ArtCate
      },
      {
        path: '/art-list',
        component: ArtList
      },
      {
        path: '/user-info',
        component: UserInfo
      },
      {
        path: '/user-avatar',
        component: UserAvatar
      },
      {
        path: '/user-pwd',
        component: UserPwd
      }
    ]
  },
  {
    path: '/hmInput',
    component: HmInput
  },
  {
    path: '/hmbutton',
    component: HmButton
  },
  {
    path: '/hmform',
    component: HmForm
  },
  {
    path: '/dropdown',
    component: Dropdown
  },
  {
    path: '/scopeslot',
    component: ScopeSlot
  },
  {
    path: '/table',
    component: Table
  },
  {
    path: '/sync',
    component: Sync
  },
  {
    path: '/VueQuillEditor',
    component: VueQuillEditor
  },
  {
    path: '/container',
    component: Container,
    children: [
      {
        path: '/testa/:id?',
        props: true, // 增加了一种接收参数的方式
        component: TestA
      },
      {
        path: '/testb',
        name: 'testb',
        component: TestB
      }
    ]
  }
]

const router = new VueRouter({
  routes
})
// 前置守卫:还没有去到想去路由
// 往往用于进入页面前的权限处理
// 白名单页面(不需要登陆也可访问的页面)
const whitePage = ['/login', '/reg', '/404']
router.beforeEach(async (to, from, next) => {
  /*
    next特性: next()它是不会再经过导航守卫直接进入相应页面
              next(其它path),它会再经过一次导航守卫
    是否有token(通过获取vuex中的token做判断)
        有token
            如果去的页面是login页
                 跳转到首页
            如果去的页面是非login页
                 是否已有用户信息   有,正常进入,没有获取用户信息后进入
                  可能token已失效:在这里获取用户信息,如果能正常获取到就正常走入,如果获取不到就会报错,再针对处理
                       通过在vuex中获取用户信息,在这里调用,调用完成再正常进入
                       1:定义一个获取用户信息的api
                       2:在vuex中定义state,mutations,actions用于获取用户信息,获取完成再到导航守卫相应位置调用
                       3:调用完成根据情况是否进入相应页面

                  正常进入
        无token
            没有token有些页面也是可以去的,比如404,注册,login,会做一个页面白名单,不需要登陆就可进入的页面
            如果是白名单页面
                  正常进入
            如果是非白名单页面
                  跳转到登陆页
  */
  if (store.state.login.token) {
    // 有token
    // console.log('to', to)
    // 注意大写要转换成小写
    if (to.path.toLowerCase() === '/login') {
      next('/')
    } else {
      // 是否有获取过用户信息
      if (store.state.login.userInfo.id) {
        // 有用户信息正常进入
        next()
      } else {
        // 没有用户信息,获取用户信息
        console.log(1)
        // 希望下面代码执行完成后再执行2的打印,进入相应页面(next())
        // store.dispatch('login/getUserInfo').then(() => {
        //   console.log(2)
        //   // 1:接口没调用完成没有验证token是否有效就进入页面了,是一个不理
        //   // 2:每一次进入一个非login页,有token时都会调用一次获取token
        //   next()
        // })
        // 使用async与await等到数据获取完成验证完token再执行后面进入页面
        // try {
        await store.dispatch('login/getUserInfo')
        console.log(2)
        next()
        // } catch (err) {
        //   console.log('错误信息', [err])
        /*
          token失效要做什么?
          1:清除老的token
          2:清除用户信息(前面使用了用户信息这些东西,既然你这token有问题,当然要清理掉)
          3:提示一下
          4:跳转到登陆页
          // 只解决了一个接口token失效问题
          */
        // if (err.response.status === 401) {
        //   // token失效了
        //   store.commit('login/logout')
        //   Message.error(err.response.data.message)
        //   next('/login')
        // }
        // 看到数据的完整信息
        // console.dir(err)
        // }
      }
    }
  } else {
    // to.path是否在白名单内
    if (whitePage.includes(to.path.toLowerCase())) {
      next()
    } else {
      next('/login?redirect=' + to.path)
    }
  }
})
// 后置守卫
router.afterEach(() => {})

const originalPush = VueRouter.prototype.push
// 修改原型对象中的push方法
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
export default router
